<template>
    <view class="searchBox">
        <image class="qr" src="/static/icons/qr.svg" v-if="!hideBtn"></image>
        <input class="search" placeholder="搜索一下" placeholder-class="placeholder"></input>
        <image class="search-icon" src="/static/icons/search.svg" :style="hideBtn ? 'left: 58rpx;' : ''"></image>
        <image class="user" src="/static/icons/user2.svg" v-if="!hideBtn" @click="goLogin"></image>
    </view>
</template>

<script>
export default {
    props: {
        hideBtn: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
        }
    },
    methods: {
        goLogin() {
            uni.navigateTo({
                url: '/sub_packages/pkg_account/login/login'
            })
        }
    }
}
</script>

<style scoped lang="scss">
.searchBox {
    width: 100%;
    box-sizing: border-box;
    background-color: #27BA9B;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12rpx 35rpx;
    position: fixed;
    z-index: 999;

    image {
        width: 32rpx;
        height: 32rpx;
    }

    .qr {
        margin-right: 30rpx;
    }

    .search {
        flex: 1;
        height: 58rpx;
        border-radius: 29rpx;
        background-color: rgba(245, 245, 245, 0.4);
        color: white;
        padding: 0 30rpx 0 70rpx;
        font-size: 28rpx;
    }

    .placeholder {
            color: white;
    }

    .user {
        margin-left: 30rpx;
    }

    .search-icon {
        position: absolute;
        left: 115rpx;
    }
}
</style>
